<template>
  <div class="left-container">
    <Card height="170px"><Chart :option="barChartOption" /></Card>
    <Card height="170px"><Chart :option="lineChartOption" /></Card>
    <Card height="170px"><Chart :option="pieChartOption" /></Card>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { getDataApi } from "../../api";
import type { ECOption } from "../../utils/echarts";
// import BarChart from "./components/BarChart.vue";
// import LineChart from "./components/LineChart.vue";

const barChartOption = ref<ECOption>({
  title: {
    text: "",
  },
  xAxis: {
    data: [],
  },
  series: {
    type: "bar",
    data: [],
    barWidth: 15,
    itemStyle: {
      borderRadius: [2, 2, 0, 0],
    },
  },
  tooltip: {
    formatter: "{b}: {c}",
  },
});

const lineChartOption = ref<ECOption>({
  title: {
    text: "",
  },
  xAxis: {
    data: [],
  },
  series: [
    {
      name: "",
      type: "line",
      data: [],
      smooth: true, // 曲线
    },
    {
      name: "",
      type: "line",
      data: [],
      smooth: true, // 曲线
    },
  ],
  tooltip: {
    formatter: (params: any) => {
      // return结果就是渲染的内容
      return params
        .map((item: any) => `${item.marker} ${item.seriesName}: ${item.data}`)
        .join("<br />");
    },
  },
});

const pieChartOption = ref<ECOption>({
  title: {
    text: "",
  },
  xAxis: {
    show: false,
  },
  yAxis: {
    show: false,
  },
  series: {
    type: "pie",
    data: [],
    radius: [28, 40],
    label: {
      show: false,
    },
  },
  legend: {
    top: "auto",
    bottom: 10,
  },
  tooltip: {
    trigger: "item",
    formatter: `{b}: {c}`,
  },
});

onMounted(async () => {
  const res = await getDataApi();
  (barChartOption.value.title as any).text = res.barChartName;
  (barChartOption.value.xAxis as any).data = res.barChartXAxis;
  (barChartOption.value.series as any).data = res.barChartData;

  (lineChartOption.value.title as any).text = res.lineChart1Name;
  (lineChartOption.value.xAxis as any).data = res.lineChartXAxis;
  (lineChartOption.value.series as any)[0].name = res.lineChart1Name;
  (lineChartOption.value.series as any)[0].data = res.lineChart1Data;
  (lineChartOption.value.series as any)[1].name = res.lineChart2Name;
  (lineChartOption.value.series as any)[1].data = res.lineChart2Data;

  (pieChartOption.value.title as any).text = res.pieChartName;
  (pieChartOption.value.series as any).data = res.pieChartData;
});

defineOptions({
  name: "Left",
});
</script>

<style scoped lang="scss">
.left-container {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;

  width: 100%;
  height: 100%;
}
</style>
